
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="lib/core/ht.js"></script>
    <script src="lib/plugin/ht-form.js"></script>
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        .map {
            height: 100vh;
        }
    </style>
    <script>

        var g2d = new ht.graph.GraphView();
        var dm = g2d.dm();

        var node = new ht.Node();
        node.setImage(json);
        dm.add(node);

        var points = [];
        node.a('points', points);

        var form = new ht.widget.FormPane();
        initForm(form);

        var formView = form.getView();
        formView.style.position = 'absolute';
        formView.style.top = '5px';
        formView.style.right = '5px';
        formView.style.background = 'rgba(230, 230, 230, 0.85)';

        window.addEventListener('load', function() {
            g2d.addToDOM();
            document.body.appendChild(formView);

            g2d.fitContent(true);
        });

        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        function setParams(s) {
            step = s;
            dr = Math.PI * 0.05 * step;
            length = Math.floor(shapeLength / step);
        }

        var tallList = [], shapeLength = 74, step = 2, length = Math.floor(shapeLength / step);
        var dr = Math.PI * 0.05 * step, PI2 = Math.PI * 2, beginX = 87, endX = 13;
        function run() {

            var count = tallList.unshift(random(1, 15));

            if (count > length) tallList.pop();

            points.length = 0;
            for (var i = 0, len = tallList.length; i < len; i++) {
                var t = tallList[i];
                var x = beginX - i * step;
                if (x < endX) break;
                points.push(x, t);
            };

            var r = node.a('rotate');

            node.a('rotate', (r - dr + PI2) % PI2);
        }

        function initForm(form) {
            var interval = setInterval(run, 100);

            form.setHeight(62);
            form.setWidth(200);
            form.addRow(['Space: ', {
                id: 'spaceMin',
                radioButton: {
                    groupId: 'space',
                    label: '2',
                    value: 2,
                    selected: true,
                    onValueChanged: function(oldV, newV) {
                        if (!newV) return;
                        setParams(parseInt(this.getLabel()));
                    }
                }
            }, {
                id: 'spaceMiddle',
                radioButton: {
                    groupId: 'space',
                    label: '5',
                    onValueChanged: function(oldV, newV) {
                        if (!newV) return;
                        setParams(parseInt(this.getLabel()));
                    }
                }
            }, {
                id: 'spaceMax',
                radioButton: {
                    groupId: 'space',
                    label: '10',
                    onValueChanged: function(oldV, newV) {
                        if (!newV) return;
                        setParams(parseInt(this.getLabel()));
                    }
                }
            }], [50, 0.1, 0.1, 0.1]);
            form.addRow([{
                button: {
                    label: '启动',
                    onClicked: function() {
                        interval = setInterval(run, 100);
                    }
                }
            }, {
                button: {
                    label: '停止',
                    onClicked: function() {
                        clearInterval(interval);
                        interval = null;
                    }
                }
            }], [0.1, 0.1]);
        }




        var json = {
            "dataBindings": [
                {
                    "attr": "rotate",
                    "valueType": "Number",
                    "defaultValue": 0,
                    "description": "旋转角度"
                },
                {
                    "attr": "step",
                    "valueType": "PositiveNumber",
                    "defaultValue": 1,
                    "description": "曲线步进"
                },
                {
                    "attr": "tallList",
                    "valueType": "String",
                    "description": "曲线高度"
                },
                {
                    "attr": "minTall",
                    "valueType": "PositiveNumber",
                    "defaultValue": 1,
                    "description": "最小高度"
                },
                {
                    "attr": "maxTall",
                    "valueType": "PositiveNumber",
                    "defaultValue": 23,
                    "description": "最大高度"
                }
            ],
            "width": 100,
            "height": 50,
            "comps": [
                {
                    "type": "circle",
                    "background": "rgb(217,217,217)",
                    "anchorX": 1,
                    "rect": [
                        75,
                        24.5,
                        25,
                        25
                    ]
                },
                {
                    "type": "circle",
                    "background": "#D8D8D8",
                    "anchorX": 0,
                    "rect": [
                        0,
                        24.5,
                        25,
                        25
                    ]
                },
                {
                    "type": "shape",
                    "borderWidth": 1,
                    "borderColor": "rgb(217,217,217)",
                    "points": [
                        12,
                        25,
                        88,
                        25,
                        88,
                        49,
                        12,
                        49
                    ],
                    "segments": [
                        1,
                        2,
                        1,
                        2
                    ]
                },
                {
                    "type": "arc",
                    "background": "rgba(204,35,35,0.39)",
                    "arcFrom": 0,
                    "arcTo": 1.5708,
                    "rotation": {
                        "func": "attr@rotate",
                        "value": 0
                    },
                    "rect": [
                        1,
                        25.5,
                        23,
                        23
                    ]
                },
                {
                    "type": "arc",
                    "background": "rgba(204,35,35,0.39)",
                    "arcTo": 4.71239,
                    "rotation": {
                        "func": "attr@rotate",
                        "value": 0
                    },
                    "rect": [
                        1,
                        25.5,
                        23,
                        23
                    ]
                },
                {
                    "type": "arc",
                    "background": "rgba(204,35,35,0.39)",
                    "arcFrom": 0,
                    "arcTo": 1.5708,
                    "rotation": {
                        "func": "attr@rotate",
                        "value": 0
                    },
                    "rect": [
                        76,
                        25.5,
                        23,
                        23
                    ]
                },
                {
                    "type": "arc",
                    "background": "rgba(204,35,35,0.39)",
                    "arcTo": 4.71239,
                    "rotation": {
                        "func": "attr@rotate",
                        "value": 0
                    },
                    "rect": [
                        76,
                        25.5,
                        23,
                        23
                    ]
                },
                {
                    "type": "shape",
                    "borderWidth": 1,
                    "borderColor": "#979797",
                    "points": {
                        "func": "attr@points",
                        "value": [
                            12.31672,
                            10.87977,
                            86.62757,
                            10.87977
                        ]
                    }
                }
            ]
        };
    </script>
</head>
<body>

</body>
</html>